<template>
  <div class="layout" v-if="showViewer">
    <div :style="bigScreenStyle" style="width: 100%; height: 100%">
      <widget v-for="(widget, index) in widgets" :key="index" v-model="widget.value" :type="widget.type" />
    </div>
  </div>
</template>

<script>
// import widget from "../bigscreenDesigner/designer/widget/temp";
import widget from "../views/bigscreenDesigner/designer/widget/temp.vue";
import { mapState } from "vuex";
import { publishMsg } from "@/mqtt";
import { SCADA_MSG } from "@/mqtt/msg.js";
import store from "@/store/index.js";
import { logInfo, logWarn } from "@/utils/log.js";
export default {
  name: "HomeView",
  components: {
    widget,
  },
  data() {
    return {
      activeTab: "",
      activeName: "",
      bigScreenStyle: {},
      widgets: [],
      dataList: {},
      timer: null,
      id: "",
      showViewer: true,
    };
  },
  //计算属性
  computed: {
    // ...mapState(["title", "menu", "page"]),
    // noChildren() {
    //   return this.navList.filter((item) => !item.children);
    // },
    // hasChildren() {
    //   return this.navList.filter((item) => item.children);
    // },
    // toIndex() {
    //   // 根据路径绑定到对应的一级菜单，防止页面刷新重新跳回第一个
    //   return "/" + this.$route.path.split("/")[1];
    // },
  },
  //监听data中数据变化
  watch: {
    "$store.state.page": {
      deep: true,
      handler(curVal, oldVal) {
        this.dataList.page = curVal;
        logInfo("watch page:", this.dataList);
      },
    },
  },
  created() {
    console.log(this.title, this.menu, this.page);
    // this.getDataIdList();
  }, //生命周期 - 创建完成
  mounted() {
    this.timer = setTimeout(() => {
      this.dataList = this.$store.state;
      // const datalist = this.$store.state;
      console.log(this.dataList, "获取的页面数据");
      // if (this.dataList.menu.length > 0) {
      this.activeTab = this.dataList.menu[0].id;
      this.id = this.dataList.menu[0].id;
      // }
      if (this.dataList.menu[0].childMenu.length > 0) {
        this.activeName = this.dataList.menu[0].childMenu[0].id;
        this.id = this.dataList.menu[0].childMenu[0].id;
      }
      let data = this.dataList.page[this.id];
      this.viewr(data);
      // this.handleClick();
    }, 2000);

    // this.reqTopologyData();
  }, //生命周期 - 挂载完成
  //方法集合
  methods: {
    clickMen(item) {
      console.log(item);
    },
    handleSelect(key, path, v) {
      console.log(key, path, v);
    },

    handleClick(tab, event) {
      // let id = "";
      if (this.dataList.menu[Number(tab.index)].childMenu.length > 0) {
        this.activeName = this.dataList.menu[Number(tab.index)].childMenu[0].id;
        this.id = this.activeName;
      } else {
        this.activeName = "";
        this.id = this.activeTab;
      }
      let newobj = this.dataList.page;
      console.log("id=", this.id);
      let data = newobj[this.id];
      console.log(data);
      if (data) {
        this.viewr(data);
      }
      // let nobj = {};

      // Object.keys(newobj).forEach((e) => {
      //   if (this.activeTab == e) {
      //     nobj = newobj[e];
      //   }
      //   console.log(newobj, e, newobj[e]);
      // });

      console.log(data, newobj);
      console.log("主菜单ID", this.activeTab, tab);
      console.log("子菜单ID", this.activeName);
    },
    viewr(data) {
      const equipment = document.body.clientWidth;
      const ratioEquipment = equipment / data.dashboard.width;
      this.bigScreenStyle = {
        // width: data.dashboard.width + "px",
        // height: data.dashboard.height + "px",
        width: "100%",
        height: "100%",
        "background-color": data.dashboard.backgroundColor,
        "background-image": "url(" + data.dashboard.backgroundImage + ")",
        "background-position": "0% 0%",
        "background-size": "100% 100%",
        "background-repeat": "initial",
        "background-attachment": "initial",
        "background-origin": "initial",
        "background-clip": "initial",
        transform: `scale(${ratioEquipment}, ${ratioEquipment})`,
        "transform-origin": "0 0",
      };
      this.widgets = data.widgets;
    },

    handleClick2(tab) {
      console.log(tab);
      console.log(this.activeTab);
      console.log(this.activeName);
    },
    // reqTopologyData() {
    //   let newMsg = {
    //     webMsgType: 1022,
    //     funCode: 4,
    //     data: { id: this.$route.query.id },
    //   };
    //   publishMsg(newMsg);
    // },
    onMessage(topic, msg) {
      // console.log(topic, msg);
      switch (msg.webMsgType) {
        case 1022:
          switch (msg.funCode) {
            case 4:
              {
                console.log("请求已经返回");
                if (msg.retCode != 0 || !msg.data) {
                  return this.$message.error(msg.retMsg);
                } else {
                  const data = msg.data.pageConfig;
                  const equipment = document.body.clientWidth;
                  const ratioEquipment = equipment / data.dashboard.width;
                  this.bigScreenStyle = {
                    width: data.dashboard.width + "px",
                    height: data.dashboard.height + "px",
                    "background-color": data.dashboard.backgroundColor,
                    "background-image":
                      "url(" + data.dashboard.backgroundImage + ")",
                    "background-position": "0% 0%",
                    "background-size": "100% 100%",
                    "background-repeat": "initial",
                    "background-attachment": "initial",
                    "background-origin": "initial",
                    "background-clip": "initial",
                    transform: `scale(${ratioEquipment}, ${ratioEquipment})`,
                    "transform-origin": "0 0",
                  };
                  this.widgets = data.widgets;
                  console.log(this.widgets);
                }
              }
              break;
            case 5:
              // console.log("保存返回")
              if (msg.retCode != 0) {
                return this.$message.error(msg.retMsg);
              } else {
                this.$message.success("保存配置成功");
              }
              break;
            default:
              break;
          }
          break;
        case 1012:
          if (msg.funCode == 2) {
            if (msg.retCode != 0) {
              return this.$message.error(msg.retMsg);
            } else {
              this.uuid = this.YkMsgFrom.ctrl_uuid;
              //console.log(this.uuid);
              if (this.uuid == msg.data.ctrl_uuid && msg.data.ctrl_step === 1) {
                this.$message.success("预置操作已执行!");
                this.buttonDisabled = false;
              } else if (msg.data.ctrl_step === 2) {
                this.$message.success("执行操作已执行!");
                this.buttonDisabled = true;
              } else if (msg.data.ctrl_step === 3) {
                this.$message.success("取消操作已执行!");
                this.buttonDisabled = true;
              }
            }
          }
          break;
        default:
          // DataMessage.onMsg(msg);
          break;
      }
    },
    getDataIdList() {
      console.log("getDataIdList, isCompleted=", store.state.isCompleted);
      if (JSON.stringify(store.state.page) == "{}") {
        let msg = {
          webMsgType: SCADA_MSG.scada_param_dashboard,
          funCode: 0,
          withPageConfig: true,
        };
        publishMsg(msg);
      }

      if (store.state.dataSet.gw.length == 0) {
        let msg = { webMsgType: SCADA_MSG.scada_param_gateway, funCode: 0 };
        publishMsg(msg);
      }

      if (store.state.dataSet.te.length == 0) {
        let msg = { webMsgType: SCADA_MSG.scada_param_terminal, funCode: 0 };
        publishMsg(msg);
      }

      if (store.state.dataSet.yx.length == 0) {
        let msg = { webMsgType: SCADA_MSG.scada_param_yx, funCode: 0 };
        publishMsg(msg);
      }

      if (store.state.dataSet.yc.length == 0) {
        let msg = { webMsgType: SCADA_MSG.scada_param_yc, funCode: 0 };
        publishMsg(msg);
      }

      if (store.state.dataSet.ym.length == 0) {
        let msg = { webMsgType: SCADA_MSG.scada_param_ym, funCode: 0 };
        publishMsg(msg);
      }

      if (store.state.dataSet.yk.length == 0) {
        let msg = { webMsgType: SCADA_MSG.scada_param_yk, funCode: 0 };
        publishMsg(msg);
      }

      if (store.state.dataSet.yt.length == 0) {
        let msg = { webMsgType: SCADA_MSG.scada_param_yt, funCode: 0 };
        publishMsg(msg);
      }

      if (store.state.dataSet.task.length == 0) {
        let msg = { webMsgType: SCADA_MSG.scada_param_task, funCode: 0 };
        publishMsg(msg);
      }

      if (store.state.dataSet.graph.length == 0) {
        let msg = { webMsgType: SCADA_MSG.scada_param_graph, funCode: 0 };
        publishMsg(msg);
      }

      if (store.state.dataSet.report.length == 0) {
        let msg = { webMsgType: SCADA_MSG.scada_param_report, funCode: 0 };
        publishMsg(msg);
      }

      let msg = { webMsgType: SCADA_MSG.scada_param_system, funCode: 0 };
      publishMsg(msg);

      console.log("getDataIdList finish");
    },
  },
  destroyed() {
    clearTimeout(this.timer);
    this.timer = null;
  },
};
</script>
<style lang="scss" scoped>
//展示区域样式
.layout {
  width: 100%;
  height: 100%;
  text-align: center;
}

.bottom-text {
  width: 100%;
  color: #a0a0a0;
  position: fixed;
  bottom: 16px;
  z-index: 9999;
}

//导航菜单样式
.common-layout {
  width: 100%;
  min-height: 100%;
  background-color: #030409;
  // background-color: #fff;
  color: #fff;
  background-image: url(../assets/img/bg.png);
  background-size: 100% 100%;
  background-size: cover;

  .home-box {}
}

.el-header {
  display: flex;
  justify-content: center;
  // align-items: center;
  --el-header-padding: 0px;
  position: relative;

  .home-title {
    display: flex;
    width: 300px;
    height: 100%;
    justify-content: center;
    align-items: center;
    font-size: 24px;
  }
}

// .el-menu {
//   background-color: transparent;
//   position: relative;
//   // top: -20px;

//   .flex-grow {
//     flex-grow: 1;
//     // min-width: 550px;
//   }
// }

// .el-menu--horizontal {
//   border-bottom: none;
//   margin: 0px 20px;
//   justify-content: center;

// .el-menu-item {
//   border-bottom: none;
//   color: red;
//   padding: 0;
//   margin: 0px 10px;
//   height: 30px;
//   align-items: center;
// }

//   .el-menu-item.is-active {
//     border-bottom: none;
//     background-color: transparent;
//   }

//   .el-menu-item:not(.is-disabled):hover {
//     background-color: transparent;
//     border-bottom: none;
//   }
// }

.el-main {
  height: calc(100vh - 158px);
  // height: 100vh;
  margin: 0px;
  padding: 0;
}

.leftTabs {
  margin: 0px 20px;
}

::v-deep .tabs2 .el-tabs__nav-scroll .el-tabs__nav .el-tabs__item {
  width: 100px;
  text-align: center;
}

/*去掉tabs底部的下划线*/
::v-deep .el-tabs__nav-wrap::after {
  position: static !important;
}

::v-deep .el-tabs__active-bar {
  background-color: transparent !important;
}

::v-deep .el-tabs__header {
  margin-bottom: 10px;
}

::v-deep .el-tabs__item {
  color: #fff;
  background-color: rgba(64, 160, 255, 0.202);
  border-radius: 30px;
  margin: 0 10px;
  padding: 0px;
}

::v-deep .el-tabs__item.is-active {
  color: #3184d7;
  background-color: rgba(64, 160, 255, 0.483);
}

// .leftTabs >>>.el-tabs__item{
//   font-size: 12px !important;
//   color: #676767
//   &:hover
//     color:black
//   &:focus
//     color :black
//     font-weight: 700
// }

// .children {
//   display: flex;
// }</style>
